<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Carousel</title>  
  <link rel="stylesheet" href="../styles/app.css"/>
  <link rel="stylesheet" href="../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../build/css/onsen-css-components.css">

  <script src="../../build/js/angular/angular.js"></script>    
  <script src="../../build/js/onsenui.js"></script>    
  <script src="../app.js"></script>  

  <style>
    ons-carousel-item {
      display: table;
      text-align: center;
    }
    .item-label {
      display: table-cell;
      vertical-align: middle;
      color: white;
      line-height: 1;
      font-size: 48px;
      font-weight: bold;
    }
    .cover-label {
      text-align: center;
      position: absolute;
      left: 0px;
      width: 100%;
      bottom: 10px;
      color: white;
    }
  </style>
  
</head>

<body>    
  <ons-navigator var="navi">

    <ons-page>
      <ons-toolbar>
        <div class="center">Carousel</div>
      </ons-toolbar>

      <br>

      <ons-list>
        <ons-list-item ng-click="navi.pushPage('example1.html')" modifier="chevron">Example1</ons-list-item>
        <ons-list-item ng-click="navi.pushPage('example2.html')" modifier="chevron">Example2</ons-list-item>
        <ons-list-item ng-click="navi.pushPage('example3.html')" modifier="chevron">Example3</ons-list-item>
        <ons-list-item ng-click="navi.pushPage('example4.html')" modifier="chevron">Example4</ons-list-item>
      </ons-list>

    </ons-page>

  </ons-navigator>  

  <ons-template id="example1.html">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">Fullscreen</div>
    </ons-toolbar>

    <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
      <ons-carousel-item style="background-color: gray;">
        <div class="item-label">GRAY</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078;">
        <div class="item-label">BLUE</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
        <div class="item-label">DARK</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #D38312;">
        <div class="item-label">ORANGE</div>
      </ons-carousel-item>
      <ons-carousel-cover><div class="cover-label">ons-caroulse-cover</div></ons-carousel-cover>
    </ons-carousel>

    <ons-bottom-toolbar>
      <ons-toolbar-button style="float:right" ng-click="carousel.next()">Next</ons-toolbar-button>
      <ons-toolbar-button style="float:left" ng-click="carousel.prev()">Prev</ons-toolbar-button>
    </ons-bottom-toolbar>
  </ons-template>

  <ons-template id="example2.html">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">Vertical</div>
    </ons-toolbar>

    <ons-carousel swipeable overscrollable auto-scroll direction="vertical" style="height: 50%; width: 100%">
      <ons-carousel-item style="background-color: gray;">
        <div class="item-label">GRAY</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078;">
        <div class="item-label">BLUE</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
        <div class="item-label">DARK</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #D38312;">
        <div class="item-label">ORANGE</div>
      </ons-carousel-item>
    </ons-carousel>

    <ons-carousel swipeable overscrollable auto-scroll direction="vertical" style="height: 50%; width: 100%" initial-index="2">
      <ons-carousel-item style="background-color: gray;">
        <div class="item-label">GRAY</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078;">
        <div class="item-label">BLUE</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
        <div class="item-label">DARK</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #D38312;">
        <div class="item-label">ORANGE</div>
      </ons-carousel-item>
    </ons-carousel>

  </ons-template>

  <ons-template id="example3.html">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <ons-carousel swipeable style="margin-top: 5px; height: 70px;" overscrollable auto-scroll item-width="70px">
      <ons-carousel-item ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]">
        <div style="background-color: #ccc; width: 60px; height: 60px; margin: 5px; border-radius: 6px;"></div>
      </ons-carousel-item>
    </ons-carousel>

    <ons-carousel swipeable style="height: 70px;" overscrollable auto-scroll item-width="70px">
      <ons-carousel-item ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]">
        <div style="background-color: #ddd; width: 60px; height: 60px; margin: 5px; border-radius: 6px;"></div>
      </ons-carousel-item>
    </ons-carousel>

    <ons-carousel swipeable style="height: 70px;" overscrollable auto-scroll item-width="70px">
      <ons-carousel-item ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]">
        <div style="background-color: #ccc; width: 60px; height: 60px; margin: 5px; border-radius: 6px;"></div>
      </ons-carousel-item>
    </ons-carousel>

    <ons-carousel swipeable style="height: 70px;" overscrollable auto-scroll item-width="70px">
      <ons-carousel-item ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]">
        <div style="background-color: #ddd; width: 60px; height: 60px; margin: 5px; border-radius: 6px;"></div>
      </ons-carousel-item>
    </ons-carousel>

  </ons-template>

  <ons-template id="example4.html">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <ons-carousel swipeable overscrollable style="height: 50%; width: 100%" initial-index="2" item-width="40%">
      <ons-carousel-cover><div style="text-align: center; position: absolute; left: 0px; width: 100%; bottom: 10px; color: white;">ons-caroulse-cover</div></ons-carousel-cover>
      <ons-carousel-item style="background-color: gray">
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078">
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44">
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #D38312">
      </ons-carousel-item>
      <ons-carousel-item style="background-color: gray">
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078">
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44">
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #D38312">
      </ons-carousel-item>
    </ons-carousel>
  </ons-template>

</body>
</html>
